<template>
    <div class="search">
        <div class="searchBox">
            <van-nav-bar right-text="搜索" 
            @click-left="onClickLeft"
            @click-right="onClickRight"
            left-arrow>
                <template #title>
                    <van-search v-model="value" shape="round" @focus="binfocus" @input="binint" placeholder="请输入搜索关键词" />
                </template>
            </van-nav-bar>
        </div>
        <div class="cont">
            <keep-alive include="searchCont">
                <router-view @todian="todian" @dele="dele"></router-view>
            </keep-alive>
            
            <div class="tuijian" v-show="isShow" @click="binSearchItem">
                <div class="item"  v-for="(item,i) in tuijianData" :data-name="item.name" :key="i">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'search',
        data() {
            return {
            value: '',
            lishiData:[],
            isShow:false,
            tuijianData:[],
            //层级
            cj:1
            };
        },
        created(){
            if(localStorage.getItem('lishiData')===null || localStorage.getItem('lishiData')==='[]'){
                // this.$router.push({ name: 'hotsearch'})
            }else{
                this.lishiData = JSON.parse(localStorage.getItem('lishiData'))
                // this.$router.push({ name: 'hotsearch'})
            }
            if (this.$route.query.search != undefined) {
                this.value = this.$route.query.search
                this.onClickRight()
            }
        },
        methods:{
            onClickLeft() {
                this.$router.go(-1*this.cj)
            },
            onClickRight() {
                if (this.value.trim() === "")return
                for (let i = 0; i < this.lishiData.length; i++) {
                    if (this.lishiData[i].title === this.value) {
                        this.lishiData.splice(i,1)
                    }
                }
                if(this.lishiData.length === 10){
                    this.lishiData.splice(0,1)
                }
                this.lishiData.push(
                    {
                        title:this.value,
                        url:`https://apis.netstart.cn/douguo/recipe/search?keyword=${this.value}&order=0&type=0&offset=0&limit=20`
                    }
                )
                localStorage.setItem('lishiData',JSON.stringify(this.lishiData))
                this.axios.get(`https://apis.netstart.cn/douguo/recipe/search?keyword=${this.value}&order=0&type=0&offset=0&limit=20`). then((response) => {
                    if (response.data.state=== "success") {
                        this.$router.push({ name: 'searchCont',query:{searchData:response.data.result.list,title:this.value}}) 
                    }
                    this.isShow=false
                })
            },
            binint(v){
                if (v.trim() === "") {
                    this.isShow = false
                }else{
                    this.isShow = true
                    this.axios.get(`https://apis.netstart.cn/douguo/recipe/search/suggests?kw=${v}`). then((response) => {
                        if (response.data.state=== "success") {
                            this.tuijianData = response.data.result.suggests
                        }
                    })
                }
            },
            todian(v){
                this.value = v;
                this.onClickRight();
            },
            dele(){
                this.lishiData = []
            },
            binfocus(){
                if (this.value.trim()!='') {
                    this.isShow = true;
                    this.binint(this.value)
                }
            },
            binSearchItem(e){
                if (e.target.className==='item') {
                    this.value = e.target.dataset.name
                    this.onClickRight();
                    this.isShow = false
                }else{
                    this.isShow = false
                }
            }
        },
        beforeRouteUpdate(to,from,next){
            this.cj +=1
        // this.stri=to.query.type;
        next();
        },
        // activated() {
        //    this.onClickRight()
        // },
    }
</script>

<style lang="less" scoped>
    .searchBox{
        /deep/.van-nav-bar__title{
            width: 300px;
            max-width: 75%;
        }
        /deep/.van-nav-bar__text{
            color: #7c7b7b;
        }
        /deep/.van-nav-bar .van-icon{
            color: #7c7b7b;
        }
    }
    .cont{
        position: relative;
        .tuijian{
            position: absolute;
            width: 100%;
            height: calc(100vh - 46px);
            top: 0;
            background-color: white;
            padding: 10px;
            box-sizing: border-box;
            div{
                line-height: 40px;
                border-bottom: 1px solid #f3f3f3;
            }
        }
    }
    
</style>